:root {
    --theme-color: #409EFF;
}
html.dark {
    --theme-color: #135fad;
}
.demo-class {background-color:var(--theme-color)}
.demo-class-one button {color:var(--theme-color)}

html.dark {

    background-color: #2c2c2c;

    //--el-bg-color: #626aef;
    .my-dialog {
        background-color: #304156;
        //color: #bfcbd9;
    }
    .el-button--primary {
        --el-button-text-color: #ededed;
    }
    .el-card{
        background-color: #3c3f41;
        color: #b4b4b4;
        border-color: #656769 !important;
    }
    .el-main{
        color: #b4b4b4 !important;
    }
    .el-menu{
        background-color: #2c2c2c !important;
    }
    .el-divider__text{
        background-color: #2c2c2c !important;
        color: #b4b4b4;

    }
    .el-popover{
        background-color: #2c2c2c !important;
        color: #b4b4b4;
        border-color: #656769 !important;
    }
    .el-menu-item:hover{
        background-color: #3c3f41 !important;
        border-radius: 10px;
    }

    .el-menu-item{
        color: #b4b4b4 !important;
    }

    .el-submenu__title{
        color: #b4b4b4;

    }
    .el-submenu__title:hover{
        color: #b4b4b4;
        background-color: #3c3f41 !important;
    }
    .el-tag{
        background-color: unset;
    }
    .el-input__inner{
        color: #b4b4b4;
        background-color: #3c3f41 !important;
        border-color: #656769 !important;
    }
    .el-button{
         color: #b4b4b4;
         background-color: #3c3f41 !important;
         border-color: #656769 !important;
     }
    .el-pager li{
        color: #cccbcb;
        background-color: #3c3f41 !important;
        border-color: #656769 !important;
    }
    .el-pagination button{
        color: #cccbcb;
        background-color: #3c3f41 !important;
        border-color: #656769 !important;
    }
    .el-collapse-item__wrap{
        background-color: #3c3f41;
        border-color: #656769 !important;
    }
    .el-collapse-item__content{
        color: #b4b4b4 !important;

    }

    .el-collapse-item__header{
        background-color: #3c3f41;
        border-color: #656769 !important;
        color: #b4b4b4 !important;

    }
    .el-pager li:not(.disabled):hover{
        color: #b4b4b4 !important;
    }
    .el-switch__label{
        color: #b4b4b4 ;
    }
    .el-menu-item.is-active{
        color: #ffffff !important;
        background-color: #2c2c2c !important;
        //border-color: #656769 !important;
        //border-radius: 10px;
    }
    .el-dialog{
        background-color: #2c2c2c;
        color: #b4b4b4 ;
    }
    .slide-verify-slider{
        background-color: #2c2c2c;
        border-color: #656769;
        color: #b4b4b4 ;
    }
    .logo{
        img{
            border-radius: 13px;
            background-color: #656769;
        }
    }
}
